<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单全选</title>
    <style>
        table {
            margin: 100px auto;
            text-align: center;
        }
        
        table,
        tr,
        th {
            border: 1px solid black;
            scroll-padding: 0px;
        }
        
        table>thead {
            background-color: antiquewhite;
        }
        
        tr>th {
            padding: 0 50px 0 50px;
        }
    </style>
</head>

<body>
    <table cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>全选<input id="box_all" type="checkbox"></th>
                <th>名称</th>
                <th>增长率</th>

            </tr>
        </thead>
        <tbody id="box">
            <tr>
                <th> <input type="checkbox"></th>
                <th>伟大伟大</th>
                <th>0.5</th>

            </tr>
            <tr>
                <th> <input type="checkbox"></th>
                <th>哈皮</th>
                <th>0.5</th>

            </tr>
            <tr>
                <th> <input type="checkbox"></th>
                <th>阿文大阿福</th>
                <th>0.5</th>

            </tr>
        </tbody>

    </table>

</body>
<script>
    var boxAll = document.getElementById('box_all');
    var box = document.getElementById('box').getElementsByTagName('input');
    boxAll.onclick = function() {
        for (var i = 0; i < box.length; i++) {
            box[i].checked = this.checked;
        }
    }

    for (var i = 0; i < box.length; i++) {

        box[i].onclick = function() {
            var flag = true;
            for (var i = 0; i < box.length; i++) {
                if (!box[i].checked) {
                    flag = false;
                }
            }
            boxAll.checked = flag;
        }

    }
</script>


</html>